<div class="row">
  <div class="col-sm">
      <h1 class="alt-h0 text-white lh-condensed-ultra mb-3">Built for developers</h1>
      <p class="alt-lead mb-4">
        Ants' hole is a personal platform to record the learning process.<br />
        I will try to use Vue, React, Typescript and other technologies to build this website.<br/>
        Any Questions, Suggestions and Concerns, you can contact with me.
      </p>
  </div>
  <div class="col-sm">
      <div class="rounded-1 text-gray bg-gray-light py-4 px-4 px-md-3 px-lg-4">
        <form class="home-hero-signup js-signup-form" autocomplete="off" action="/join" accept-charset="UTF-8" method="post">
          <div class="mb10">
            <label for="username">Username</label>
            <input class="form-control form-control-lg" type="text" name="username" id="username" placeholder="pick a username">
            <div class="invalid-feedback">username is required</div>
          </div>
          <div class="mb10">
            <label for="email">Email</label>
            <input class="form-control form-control-lg" type="email" name="email" id="email" placeholder="you@example.com">
            <div class="invalid-feedback">email is required</div>
          </div>
          <div class="mb10">
            <label for="password">Password</label>
            <input class="form-control form-control-lg" type="password" name="password" id="password" placeholder="Create a password">
            <small class="text-muted">Use at least one letter, one numeral, and seven characters.</small>
            <div class="invalid-feedback">Password is required</div>
          </div>
          <div class="mb10">
            <button class="btn btn-primary btn-large f4 btn-block" type="button" id="join">Sign up for Ants' Hole</button>
          </div>
        </form>
    </div>
  </div>
</div>

{{#extend "scripts"}}
    <script src="/javascripts/join/index.js"></script>
{{/extend}}
